<template>
  <div class="h-full bg-white rounded-content-wrap p-5">
    <el-tabs v-model="activeName" class="h-full">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        lazy
      >
        <component :is="item.name"></component>
        <!-- :data-list.sync="dataList"
          :total.sync="total" -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Land from '@/components/admin/manage/carrier/Land/index.vue'
import { ActionsType } from '@/actions/tree'

export default Vue.extend({
  components: {
    Land,
    Building: () => import('@/components/admin/manage/carrier/Building/index.vue'),
    Workshop: () => import('@/components/admin/manage/carrier/Workshop/index.vue'),
    Depository: () => import('@/components/admin/manage/carrier/Depository/index.vue'),
    Shop: () => import('@/components/admin/manage/carrier/Shop/index.vue'),
  },
  data() {
    return {
      tabList: [
        {
          label: '土地',
          name: 'Land',
        },
        {
          label: '写字楼',
          name: 'Building',
        },
        {
          label: '厂房',
          name: 'Workshop',
        },
        {
          label: '仓库',
          name: 'Depository',
        },
        {
          label: '商铺',
          name: 'Shop',
        },
      ],
      activeName: 'Land',
    }
  },
  head: {
    title: '载体管理',
  },
  created() {
    this.$store.dispatch(ActionsType.getIndustryTag)
  },
})
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  @apply text-main-content;
}

::v-deep .el-tabs__item.is-active {
  @apply text-main-title;
  @apply font-semibold;
}

::v-deep .el-tabs__header {
  @apply m-0;
}

::v-deep .el-tabs__content,
.el-tab-pane {
  height: calc(100% - 10px) !important;
}
</style>
